class Index{
    constructor(){
        this.obox = document.getElementById("banner-box");
        this.item = document.querySelectorAll("#banner-box a");
        this.afloor = document.querySelectorAll(".floor-link li");

        this.agoodsTab = document.getElementsByClassName("floor-top-tab")[0].children;
        this.optionF = document.getElementsByClassName("option-wrap")[0];
        //初始化
        // this.init();
        // this.loginEvent();
        //显示元素
        this.findEle();
        //登场的index
        this.index = 0;
        //离开的previe
        this.previe = this.item.length-1;

        this.addEvent();

        this.timeId = null;
        this.autuPlay();

        this.url = "data/goods.json";
        //商品列表请求
        this.getGoodsRequest();
        this.menuUrl = "data/menu.json";
        this.getMenuRequest();

        //轮播图圆点
        this.bannerIndexRender();

        //aside-fixed需要交互的地方
        
    }
    bannerIndexRender(){
        let str="";
        
        for(let i=0;i<3;i++){
            str += `<span banIdx=${i}></span>`;
        }
        $("#banner-page-index").html(str);
        $("#banner-page-index").children("span").eq(0).addClass("index-active")
        this.bannerIdx = document.querySelectorAll("#banner-page-index span");
        
    }
    
    
    getGoodsRequest(){
        $.ajax({
            url:this.url,
            success:(res)=>{
                this.res = JSON.parse(res);
                //对商品数据进行渲染
                this.goodsRender();
            }
        })
    }
    getMenuRequest(){
        $.ajax({
            url: this.menuUrl,
            success:(res)=>{
                this.menuRes = JSON.parse(res);
                //渲染 三级菜单
                this.menuRender();
            }
        })
    }
    menuRender(){
        var str ="";
        for(var i=0;i<this.menuRes.length;i++){
            str += `<li>
                        <div class="option-sec-title">
                            <img src="images/nav-sec-icon1.png" alt="">${this.menuRes[i].name}
                            <span>></span>
                        </div>
                        <div class="option-third" style="display: none;">
                            <ul>
                                ${renderThirdMenu(this.menuRes[i])}
                            </ul>
                        </div>
                    </li>`;
        }
        $("#option-sec").children("ul").html(str);
    }
    
    goodsRender(){
        let strType1 = "";
        let strType2 = "";
        let strType3 = "";
        this.res.forEach(val => {
            if(val.type==="无线充线圈"){
                strType1 += `<a class="center-cont-case" href="detail.html?id=${val.goodsId}">
                                <div class="center-cont-case-img">
                                    <img src="${val.img}" alt="">
                                </div>
                                <div class="center-cont-case-main">
                                    <p>${val.name}</p>
                                    <span>${val.xinghao}</span>
                                    <div>
                                        <span>￥${val.price}</span>
                                        <span>查看详情></span>
                                    </div>
                                </div>
                            </a>`
            }
             
        });
        this.res.forEach(val => {
            if(val.type==="无线充PCBA"){
                strType2 += `<a class="center-cont-case" href="detail.html?id=${val.goodsId}">
                                <div class="center-cont-case-img">
                                    <img src="${val.img}" alt="">
                                </div>
                                <div class="center-cont-case-main">
                                    <p>${val.name}</p>
                                    <span>${val.xinghao}</span>
                                    <div>
                                        <span>￥${val.price}</span>
                                        <span>查看详情></span>
                                    </div>
                                </div>
                            </a>`
            }
             
        });
        this.res.forEach(val => {
            if(val.type==="无线充主控芯片"){
                strType3 += `<a class="center-cont-case" href="detail.html?id=${val.goodsId}">
                                <div class="center-cont-case-img">
                                    <img src="${val.img}" alt="">
                                </div>
                                <div class="center-cont-case-main">
                                    <p>${val.name}</p>
                                    <span>${val.xinghao}</span>
                                    <div>
                                        <span>￥${val.price}</span>
                                        <span>查看详情></span>
                                    </div>
                                </div>
                            </a>`
            }
             
        });

        $("#center-cont-box1").html(strType1);
        $("#center-cont-box2").html(strType2);
        $("#center-cont-box3").html(strType3);
    }
    autuPlay(){
        //自动轮播图
        clearInterval(this.timeId);
        this.timeId = setInterval(() => {
            this.changeRight();
            this.banIdxChange();
        }, 3000);
    }
    addEvent(){
        var that = this;
        //楼层定位
        for(var i =0;i<this.afloor.length;i++){
            this.afloor[i].floorIdx = i+1;
            this.afloor[i].onclick = function(){
                document.documentElement.scrollTop = document.querySelector(".floor"+this.floorIdx).offsetTop - 58;
            }
        }

        this.optionF.onmouseover = function(){
            that.optionS = document.getElementById("option-sec");
            that.optionS.style.display = "block";
            that.optionS.onmouseover = function(eve){
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if(tar.className==="option-sec-title"){
                    var ali = tar.parentNode.parentNode.children;
                    for(var i =0;i<ali.length;i++){
                        ali[i].children[1].style.display = "none";
                    }
                    tar.nextElementSibling.style.display = "block";
                }
                
            }
        }
        this.optionF.onmouseout = function(){
            that.optionS.style.display = "none";
        }

        //商品tab事件
        for(let i=0;i<this.agoodsTab.length;i++){
            this.agoodsTab[i].abc = i+1;
            this.agoodsTab[i].onmouseover = function(){
                for(let j=0;j<that.agoodsTab.length;j++){
                    that.agoodsTab[j].className = "";
                    document.getElementById("center-cont-box"+(j+1)).parentNode.style.display = "none";
                }
                this.className = "floor-top-tab-choose";
                document.getElementById("center-cont-box"+this.abc).parentNode.style.display = "block";
            }

        }
    }
    findEle(){
        var that = this;
        this.obox.onmouseover = function(){
            that.obox.querySelectorAll("span")[0].style.display = "block";
            that.obox.querySelectorAll("span")[1].style.display = "block";
            that.btnl = document.getElementById("banner-btnl");
            that.btnr = document.getElementById("banner-btnr");
            clearInterval(that.timeId);
            that.changeIndex();
        }
        this.obox.onmouseout = function(){
            that.timeId = setInterval(() => {
                that.changeRight();
                this.banIdxChange();
            }, 3000);
            that.obox.querySelectorAll("span")[0].style.display = "none";
            that.obox.querySelectorAll("span")[1].style.display = "none";
        }
    }
    changeIndex(){
        var that = this;
        this.btnl.onclick = function(){
            that.changeLeft();
        }
        this.btnr.onclick = function(){
            that.changeRight();
        }
        
    }
    //左边按钮
    changeLeft(){
        if(this.index===0){
            this.index = this.item.length-1;
            this.previe = 0;
        }else{
            this.index = this.index - 1;
            this.previe = this.index + 1;
        }
        this.leftRender();
    }
    //右边按钮
    changeRight(){

        if(this.index===this.item.length-1){
            this.index=0;
            this.previe = this.item.length-1;
        }else{
            this.index = this.index + 1;
            this.previe = this.index-1;
        }
        this.rightRender();

    }
    //banner圆点渲染
    banIdxChange(){
        for(let j=0;j<this.bannerIdx.length;j++){
            this.bannerIdx[j].className="";
        }
        this.bannerIdx[this.index].className = "index-active";
    }
    banIndexBtn(){
        var that = this;
        for(let i=0;i<this.bannerIdx.length;i++){
            this.bannerIdx[i].onclick = function(){
                for(let j=0;j<that.bannerIdx.length;j++){
                    that.bannerIdx[j].className="";
                }
                this.className = "index-active";
                that.index = this.getAttribute("banIdx");
            }
        }
    }
    //渲染
    leftRender(){
        var that = this;
        //从哪来
        this.item[this.previe].style.left = 0;
        move(this.item[this.previe],{left:this.item[0].offsetWidth})
        //到哪去
        this.item[this.index].style.left = -this.item[0].offsetWidth + "px";
        move(this.item[this.index],{left:0},function(){
            // that.autuPlay();
        })
    }
    rightRender(){
        var that = this;
        //从哪来
        this.item[this.previe].style.left = 0;
        move(this.item[this.previe],{left:-this.item[0].offsetWidth})
        //到哪去
        this.item[this.index].style.left = this.item[0].offsetWidth + "px";
        move(this.item[this.index],{left:0},function(){
            // that.autuPlay();
        })
    }
}
function renderThirdMenu(item){
    let str = "";
    for(var j=0;j<item.children.length;j++){
        str += `<li>${item.children[j]}</li>`;
    }
    return str;
}
new Index;